<template>
  <div class="page-container">
    <div class="page-header">
      <h2>当前任务</h2>
      <div class="task-filter">
        <select v-model="filterType" @change="handleFilter">
          <option value="">全部类型</option>
          <option value="vocabulary">词汇练习</option>
          <option value="reading">阅读理解</option>
          <option value="listening">听力训练</option>
          <option value="speaking">口语练习</option>
          <option value="writing">写作任务</option>
        </select>
      </div>
    </div>

    <!-- 任务进度概览 -->
    <div class="task-overview">
      <div class="overview-card urgent">
        <div class="overview-icon">⚡</div>
        <div class="overview-content">
          <div class="overview-title">待完成紧急任务</div>
          <div class="overview-number">{{ urgentTasksCount }}</div>
        </div>
      </div>
      <div class="overview-card">
        <div class="overview-icon">📝</div>
        <div class="overview-content">
          <div class="overview-title">进行中任务</div>
          <div class="overview-number">{{ currentTasks.length }}</div>
        </div>
      </div>
      <div class="overview-card">
        <div class="overview-icon">✅</div>
        <div class="overview-content">
          <div class="overview-title">已完成任务</div>
          <div class="overview-number">{{ completedCount }}</div>
        </div>
      </div>
    </div>

    <!-- 任务列表 -->
    <div class="tasks-container">
      <div v-if="filteredTasks.length" class="tasks-grid">
        <div v-for="task in filteredTasks" :key="task.id" class="task-card">
          <div class="task-header">
            <span class="task-type" :class="task.type">{{ getTaskTypeName(task.type) }}</span>
            <span class="deadline" :class="{ urgent: isUrgent(task) }">
              {{ getDeadlineText(task.endTime) }}
            </span>
          </div>
          <h3 class="task-title">{{ task.title }}</h3>
          <p class="task-desc">{{ task.description }}</p>

          <!-- 任务资源 -->
          <div v-if="task.resources && task.resources.length" class="task-resources">
            <h4>学习资源</h4>
            <div class="resource-list">
              <a v-for="resource in task.resources" :key="resource.url" :href="resource.url" class="resource-item" target="_blank">
                <i class="icon">📄</i>
                <span>{{ resource.name }}</span>
              </a>
            </div>
          </div>

          <!-- 任务时间 -->
          <div class="task-meta">
            <div class="time-info">
              <div class="time-item">
                <i class="icon">📅</i>
                <span>开始：{{ formatDate(task.startTime) }}</span>
              </div>
              <div class="time-item">
                <i class="icon">⏰</i>
                <span>截止：{{ formatDate(task.endTime) }}</span>
              </div>
            </div>
          </div>

          <button class="start-btn" @click="startTask(task)">开始学习</button>
        </div>
      </div>
      <div v-else class="empty-state">
        <div class="empty-icon">📝</div>
        <p>当前没有进行中的任务</p>
      </div>
    </div>
  </div>
</template>

<script>
import { taskApi } from '@/api'

export default {
  name: 'CurrentTasks',
  data() {
    return {
      currentTasks: [],
      filterType: '',
      completedCount: 0
    }
  },
  computed: {
    filteredTasks() {
      if (!this.filterType) return this.currentTasks
      return this.currentTasks.filter((task) => task.type === this.filterType)
    },
    urgentTasksCount() {
      return this.currentTasks.filter((task) => this.isUrgent(task)).length
    }
  },
  async created() {
    await this.fetchTasks()
  },
  methods: {
    async fetchTasks() {
      try {
        const response = await taskApi.getTasks()
        // 只获取进行中的任务
        this.currentTasks = response.data.filter((task) => {
          const now = new Date()
          const startTime = new Date(task.startTime)
          const endTime = new Date(task.endTime)
          return now >= startTime && now <= endTime
        })
      } catch (error) {
        console.error('获取任务失败:', error)
        this.$message.error('获取任务失败')
      }
    },
    getTaskTypeName(type) {
      const typeMap = {
        vocabulary: '词汇练习',
        reading: '阅读理解',
        listening: '听力训练',
        speaking: '口语练习',
        writing: '写作任务'
      }
      return typeMap[type] || type
    },
    formatDate(dateStr) {
      const date = new Date(dateStr)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(
        date.getHours()
      ).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    },
    getDeadlineText(endTime) {
      const now = new Date()
      const end = new Date(endTime)
      const diffDays = Math.ceil((end - now) / (1000 * 60 * 60 * 24))

      if (diffDays <= 1) return '今天截止'
      if (diffDays <= 2) return '明天截止'
      return `${diffDays}天后截止`
    },
    isUrgent(task) {
      const now = new Date()
      const end = new Date(task.endTime)
      const diffHours = (end - now) / (1000 * 60 * 60)
      return diffHours <= 24 // 24小时内算紧急
    },
    handleFilter() {
      // 可以添加额外的筛选逻辑
    },
    startTask(task) {
      console.log('跳转到任务详情或学习页面', task)
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.task-filter select {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
}

.task-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.overview-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #dcdfe6;
}

.overview-card.urgent {
  border-color: #f56c6c;
  background: #fef0f0;
}

.overview-icon {
  font-size: 24px;
}

.overview-content {
  flex: 1;
}

.overview-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.overview-number {
  font-size: 24px;
  color: #303133;
  font-weight: 500;
}

.tasks-grid {
  display: grid;
  gap: 20px;
}

.task-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #dcdfe6;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.task-type {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.vocabulary {
  background: #409eff;
}
.reading {
  background: #67c23a;
}
.listening {
  background: #e6a23c;
}
.speaking {
  background: #f56c6c;
}
.writing {
  background: #909399;
}

.deadline {
  font-size: 12px;
  color: #909399;
}

.deadline.urgent {
  color: #f56c6c;
  font-weight: 500;
}

.task-title {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #303133;
}

.task-desc {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

.task-resources {
  margin-bottom: 16px;
}

.task-resources h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #303133;
}

.resource-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.resource-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f5f7fa;
  border-radius: 4px;
  font-size: 12px;
  color: #606266;
  text-decoration: none;
  transition: all 0.3s;
}

.resource-item:hover {
  background: #ecf5ff;
  color: #409eff;
}

.task-meta {
  margin-bottom: 16px;
}

.time-info {
  display: grid;
  gap: 8px;
}

.time-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #909399;
  font-size: 14px;
}

.start-btn {
  width: 100%;
  padding: 10px 0;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.start-btn:hover {
  background: #66b1ff;
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #909399;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .task-overview {
    grid-template-columns: 1fr;
  }
}
</style>
